<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '贵阳民宿',
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <div class="hotel-page">
    <wd-sticky style="z-index: 10">
      <SearchInput @search="search" />
    </wd-sticky>

    <LoadPage ref="loadPage" url="/hotels-layout-app/open/page" :immediate="false">
      <template v-slot="{ list }">
        <div class="hotel-list">
          <HotelItemBig v-for="(item, index) in list" :key="index" :hotel="item" />
        </div>
      </template>
    </LoadPage>
  </div>
</template>

<script lang="ts" setup>
import { useHotelSearch } from '@/store/hotelSearch'
import HotelItemBig from './components/HotelItemBig.vue'
import SearchInput from './components/SearchInput.vue'

const hotelSearch = useHotelSearch()

const loadPage = ref()

// 筛选信息改变
function search() {
  getData(true)
}

// 上拉加载
onReachBottom(() => {
  getData()
})

// 下拉刷新
onPullDownRefresh(() => {
  getData(true)
})

function getData(isRefresh = false) {
  if (loadPage.value) {
    loadPage.value.getData(
      {
        enterDate: hotelSearch.searchInfo.startDate,
        leaveDate: hotelSearch.searchInfo.endDate,
        hotelAddr: hotelSearch.searchInfo.searchText || hotelSearch.searchInfo.cityName,
      },
      isRefresh,
    )
  } else {
    setTimeout(() => {
      getData(isRefresh)
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.hotel-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 50rpx;
  font-size: 0;
  background-color: var(--bgc4);

  .hotel-list {
    padding: 28rpx 30rpx 0;
  }
}
</style>
